<template>
	<view class="home">
		
		<div class="part top-part">
			<!-- 功能入口 -->
			<div class="func-list">
				<div class="func-item" v-for="(item, index) in funcList" :key="index" 
					:style="{width: 100 / funcList.length - 1 + '%'}"
					@click="funcClickAction(item)">
					<div style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
						<image class="func-icon" :src="item.icon"></image>
						<view class="func-title" :class="index % 2 !== 0 ? 'func-title-yellow' : 'func-title-blue'">{{ item.title }}</view>
					</div>
					<div style="position: absolute; right: 4rpx;"  v-if="index !== funcList.length - 1">|</div>
				</div>
			</div>
			<!-- 描述 -->
			<div class="desc-list" v-if="descList.length === 3">
				<div class="desc-side">«»</div>
				<div class="desc-center">{{ descList[0] }}<br>{{ descList[1] }}<br>{{ descList[2] }}</div>
				<div class="desc-side">«»</div>
			</div>
		</div>
		
		<div class="part center-part">
			<!-- 排阵 -->
			<swiper class="swiper" circular :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay"
				:interval="swiper.interval" :duration="swiper.duration" :vertical="swiper.vertical" 
				:indicator-color="'#fff'" :indicator-active-color="'gold'"
				:previous-margin="swiper.preMargin" :next-margin="swiper.nextMargin" @change="changeAction">
				<swiper-item class="form-item" v-for="(item, index) in formList" :key="index">
					<!-- <image class="form-icon" :src="item.icon"></image> -->
					<tarot-form style="width: 400rpx; height: 400rpx;" :type="item.type"></tarot-form>
					<view class="form-title">{{ item.title }}</view>
				</swiper-item>
			</swiper>
			<!-- 遮罩 -->
			<!-- <div class="mask mask-top"></div>
			<div class="mask mask-bottom"></div> -->
		</div>
		
		<div class="part bottom-part">
			<!-- 选阵 -->
			<image class="start-btn-bg btn-bg-animation" src="@/static/images/icon-bg.png"></image>
			<div class="start-btn" @click="clickAction">选阵</div>
		</div>
	</view>
</template>

<script>
	import TarotForm from '@/pages/tarotForm.vue'
	export default {
		components: {
			TarotForm,
		},
		data() {
			return {
				descList: [
					"来到这里，心里大概有些困惑吧",
					"或许，这里有你的答案",
					"带着你的困惑，选择牌阵",
				],
				funcList: [{
						title: "今日运势",
						icon: require("@/static/images/card.png"),
						path: "/pageDay/day/index"
					},
					{
						title: "关于我",
						icon: require("@/static/images/about.png"),
						path: "/pageIssue/issue/index"
					}
				],
				swiper: {
					indicatorDots: true,
					autoplay: false,
					interval: 2000,
					duration: 500,
					vertical: false,
					// preMargin: "120rpx",
					// nextMargin: "120rpx",
				},
				formList: [{
						title: "单张预测",
						icon: require("@/static/logo.png"),
						count: 1,
						type: 1000,
					},
					{
						title: "三张无牌阵",
						icon: require("@/static/logo.png"),
						count: 3,
						type: 5001,
					},
					{
						title: "恋人时间流",
						icon: require("@/static/logo.png"),
						count: 3,
						type: 1001,
					},
					{
						title: "恋人圣三角",
						icon: require("@/static/logo.png"),
						count: 3,
						type: 1002,
					},
					{
						title: "恋人金字塔",
						icon: require("@/static/logo.png"),
						count: 4,
						type: 1003,
					},
					{
						title: "灵感对应",
						icon: require("@/static/logo.png"),
						count: 6,
						type: 3001,
					},
					{
						title: "事业时间流",
						icon: require("@/static/logo.png"),
						count: 3,
						type: 2001,
					},
					{
						title: "事业圣三角",
						icon: require("@/static/logo.png"),
						count: 3,
						type: 2002,
					},
					{
						title: "事业金字塔",
						icon: require("@/static/logo.png"),
						count: 4,
						type: 2003,
					},
					{
						title: "二择一",
						icon: require("@/static/logo.png"),
						count: 5,
						type: 4001,
					}
				],
				selectedIndex: 0,
			}
		},
		created() {},
		methods: {
			onShareAppMessage: function(res) {
			  if (res.from === 'button') {
				// 来自页面内转发按钮
						console.log(res);
			  }
			  return {
				title: '塔罗牌在线抽卡',
				// imageUrl: 'https://guacheng.fanwan.net.cn/applet/tools/newSharePic.png',
				// path: '/pages/startPage/startIndex?userInviteCode=' + this.userQRcode,
			  }
			},
			funcClickAction(item) {
				console.log("func click: ", item);
				const path = item.path;
				if (!path) {
					uni.showToast({
						title: '暂未开放',
						icon: 'error'
					});
					return;
				}
				uni.navigateTo({ url: path })
			},
			changeAction(event) {
				if (!event.detail) {
					return;
				}
				this.selectedIndex = event.detail.current;
				console.log("swiper change: ", this.selectedIndex);
			},
			clickAction() {
				console.log("button click: ", this.selectedIndex);
				const selectedItem = this.formList[this.selectedIndex];

				const obj = Object.assign({}, selectedItem);
				delete obj['icon'];
				const params = encodeURIComponent(JSON.stringify(obj));
				uni.navigateTo({url: '/pageDetail/detail/index?params=' + params});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		height: 100vh;
		background-color: #20254c;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.part {
		width: 100%;
		flex: 1;
		color: #fff;
	}

	.top-part {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.func-list,
		.desc-list {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 100%;
		}

		.func-list {
			flex: 3;

			.func-item {
				position: relative;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				height: 100%;
			}

			.func-icon {
				width: 120rpx;
				height: 120rpx;
				// border-radius: 60rpx;
				// border: 1px solid #fedb11;
			}

			.func-title {
				margin-left: 10rpx;
				
				font-size: 36rpx;
				font-weight: bold;
			}
			
			.func-title-yellow {
				color: #fedb11;
			}
			.func-title-blue {
				color: #11b7ee;
			}
		}

		.desc-list {
			flex: 2;

			.desc-side {
				width: 160rpx;
				color: #9e9fad;
				text-align: center;
				font-size: 40rpx;
			}

			.desc-center {
				height: 100%;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				color: #ccbd82;
				text-align: center;
			}
		}
	}

	.center-part {
		position: relative;
		flex: 1.5 !important;
		background-color: #20254c;

		.swiper {
			height: 100%;

			.form-item {
				height: 100%;
				line-height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				// border-top: 1px solid #f4f4f4;
				// border-bottom: 1px solid #f4f4f4;

				.form-icon {
					width: 240rpx;
					height: 240rpx;
					border-radius: 120rpx;
					border: 1px solid #000;
				}

				.form-title {
					width: 100%;
					height: 40rpx;
					margin-top: 20rpx;
					color: #fff;
					text-align: center;
				}
			}
		}

		.mask {
			position: absolute;
			width: 100%;
			height: 120rpx;
			background-color: rgba(255, 255, 255, 0.8);
		}

		.mask-top {
			top: 0;
		}

		.mask-bottom {
			bottom: 0;
		}
	}

	.bottom-part {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		.btn-bg-animation {
			-webkit-animation: rotateAnimation 5s linear infinite;
					animation: rotateAnimation 5s linear infinite;
		}
		@keyframes rotateAnimation {
		  // 0% {
		  //   transform: rotate(0deg);
		  // }
		  // 100% {
		  //   transform: rotate(360deg);
		  // }
		  0% {
			transform: scale(1) rotate(0deg);;
		  }
		  50% {
		  	transform: scale(1.1) rotate(180deg);;
		  }
		  100% {
		    transform: scale(1) rotate(360deg);;
		  }
		}
		.start-btn-bg {
			width: 200rpx;
			height: 200rpx;
		}
		.start-btn {
			position: absolute;
			// top: calc(45% - 65rpx);
			// left: calc(50% - 65rpx);
			width: 150rpx;
			height: 150rpx;
			border-radius: 75rpx;
			// background-color: #e5d367;
			color: #000;
			text-align: center;
			line-height: 150rpx;
			font-size: 40rpx;
			font-weight: lighter;
			color: gold;
		}
	}
</style>